<template>
  <div class="detail">
    <div v-if="detailPageLoading" class="loading-overlay">
      <!-- 加载动画或提示 -->
      <div>
        <svg
          t="1704877746884"
          width="100"
          height="100"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4211"
        >
          <defs>
            <!-- 创建线性渐变，从左到右 -->
            <linearGradient ref="cloud" id="blueGradient" :x1="gradientX1">
              <stop offset="0%" style="stop-color: #2a79bf; stop-opacity: 1" />
              <stop offset="100%" style="stop-color: white; stop-opacity: 1" />
            </linearGradient>
          </defs>
          <path
            d="M1024 657.542c0-82.09-56.678-150.9-132.996-169.48C887.762 359.362 782.546 256 653.142 256c-75.792 0-143.266 35.494-186.854 90.732-24.442-31.598-62.69-51.96-105.708-51.96-73.81 0-133.642 59.874-133.642 133.722 0 6.436 0.48 12.76 1.364 18.954-11.222-2.024-22.766-3.138-34.57-3.138C86.734 444.308 0 531.096 0 638.152 0 745.214 86.734 832 193.73 832l656.262 0 0-0.012C946.13 831.804 1024 753.776 1024 657.542z"
            p-id="4212"
            fill="url(#blueGradient)"
            stroke="#0000ff"
            stroke-width="3"
          ></path>
        </svg>
        <p class="font-bold">正在拼命加载中...</p>
      </div>
    </div>
    <div v-else class="content">
      <!-- 资讯头部信息卡片 -->
      <div class="other-info" v-if="detailInfo.searchType === '1'">
        <el-descriptions class="mb-4" :column="3" size="min" border>
          <el-descriptions-item width="10">
            <template #label>
              <div class="cell-item">发文部门</div>
            </template>
            <!-- {{ info?.orgName || "" }} -->
            <p style="min-width:250px" v-html="info.orgName"></p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">发文字号</div>
            </template>
            <p style="min-width:250px;font-size:14px">{{ info?.proof || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">成文日期</div>
            </template>
            <p style="min-width:250px;font-size:14px">{{ detailInfo.completeDate || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">排序日期</div>
            </template>
            {{ info?.sortDate || "" }}
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">资讯性质</div>
            </template>
            {{ detailInfo.character || "" }}
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">编辑人员</div>
            </template>
            {{ info?.createName || "" }}
          </el-descriptions-item>
          <!-- 仅后台人员可看 -->
          <el-descriptions-item width="20" v-if="userInfo.userType == '00'">
            <template #label>
              <div class="cell-item">审核人员</div>
            </template>
            {{ info?.auditName || "" }}
          </el-descriptions-item>
          <!-- 仅后台人员可看 -->
          <el-descriptions-item width="20" v-if="userInfo.userType == '00'">
            <template #label>
              <div class="cell-item">发布日期</div>
            </template>
            {{ detailInfo?.publishDate || "" }}
          </el-descriptions-item>
          <!-- 仅后台人员可看 -->
          <el-descriptions-item width="20" v-if="userInfo.userType == '00'">
            <template #label>
              <div class="cell-item">资讯来源</div>
            </template>
            <a :href="info?.source" target="_blank">来源网站</a>
          </el-descriptions-item>
        </el-descriptions>
        <div
          class="text-center title"
          style="color: #1176de; font-size: 24px; font-weight: 700"
        >
          {{ pageTitle }}
        </div>
      </div>

      <!-- 政策头部信息卡片 -->
      <div class="other-info" v-else-if="detailInfo.searchType === '2'">
        <el-descriptions class="mb-4" :column="3" size="default" border>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">政策名称</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ pageTitle || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">曾用名</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ info?.formerName || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">首批年份</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ info?.year ? info?.year + "年" : "" || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">支持额度</div>
            </template>
            <p class="cell-item-dec">{{ info.quota2 ==info.quota1&&(info.quota2!=null&&info.quota1!=null)? info.quota1:info.quota ? info.quota + " 万元" : "无" || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">状态</div>
            </template>
            <p class="cell-item-dec">{{ info?.status || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">申报截止</div>
            </template>
            <p class="count-down cell-item-dec">
              {{
                deadline|| "无"
              }}
            </p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">主管部门</div>
            </template>
            <!-- {{ info?.orgName || "无" }} -->
            <p class="cell-item-dec" v-html="info?.orgName"></p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">覆盖范围</div>
            </template>
            <p class="cell-item-dec">{{ info?.areaName || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">申报系统</div>
            </template>
            <!-- {{ info?.systemName || "无" }} -->
            <p class="cell-item-dec"  v-html="info.systemName"></p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">政策利好</div>
            </template>
            {{ info?.benefits || "无" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 部门头部信息卡片 -->
      <div class="other-info" v-else-if="detailInfo.searchType === '3'">
        <el-descriptions class="mb-4" :column="3" size="default" border>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">部门名称</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ pageTitle || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">部门状态</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ info?.status || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">曾用名</div>
            </template>
            <p class="cell-item-dec" style="min-width:250px">{{ info?.formerName || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">所属部门</div>
            </template>
            <p class="cell-item-dec" >{{ info?.parentOrgName || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">部门类型</div>
            </template>
            <p class="cell-item-dec" >{{ info?.orgType || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">主管类型</div>
            </template>
            <p class="cell-item-dec" >{{ info?.type || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">覆盖范围</div>
            </template>
            <p class="cell-item-dec" >{{ info?.areaName || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">负责人</div>
            </template>
            <p class="cell-item-dec" >{{ info?.principal || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">联系方式</div>
            </template>
            <a :href="`tel:${info?.tel || ''}`" class="call">{{
              info?.tel || ""
            }}</a>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">官方网站</div>
            </template>
            <a :href="info?.webUrl">
              {{ info?.webUrl || "" }}
            </a>
          </el-descriptions-item>
          <el-descriptions-item width="20">
            <template #label>
              <div class="cell-item">办公地址</div>
            </template>
            <a
              :href="`https://ditu.amap.com/search?query=${
                info?.address || ''
              }`"
              target="_blank"
            >
              {{ info?.address || "" }}
            </a>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 企业头部信息卡片 -->
      <div class="other-info" v-else-if="detailInfo.searchType === '4'">
        <el-descriptions class="mb-4" :column="3" size="default" border>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">单位名称</div>
            </template>
            <p  class="cell-item-dec" >{{ info?.name || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">登记状态</div>
            </template>
            <p class="cell-item-dec">{{ info?.status || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">曾用名</div>
            </template>
            <p class="cell-item-dec">{{ info?.historyName || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item" style="min-width:80px">法定代表人 </div>
            </template>
            <p class="cell-item-dec">{{ info?.founder || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">成立时间</div>
            </template>
            <p class="cell-item-dec">{{ info?.foundingDate || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">注册资本</div>
            </template>
            <p class="cell-item-dec">{{ info?.registeredCapital || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">单位网站</div>
            </template>
            <p class="cell-item-dec">{{ info?.webUrl || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item >
            <template #label>
              <div class="cell-item">所属地区</div>
            </template>
            <p class="cell-item-dec">{{ info?.parkNameStr || "无" }}</p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">国标行业</div>
            </template>
            <p class="cell-item-dec" style="width:300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{ info?.industryNameStr || "" }}</p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">注册地址</div>
            </template>
            <a class="cell-item-dec"
              :href="`https://ditu.amap.com/search?query=${
                info?.address || ''
              }`"
              target="_blank"
            >
              {{ info?.address || "" }}
            </a>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 资讯样式 -->
      <template v-if="detailInfo.searchType === '1'">
        <el-tabs class="demo-tabs" v-model="activeName">
          <el-tab-pane label="正文详情" name="first">
            <template v-if="detailInfo.searchType === '1'">
              <div v-html="details" class="rich-text"></div>
              <div class="detail-title">
                <!-- <div class="text-center title">{{ pageTitle }}</div> -->
                <div class="util-list">
                  <div class="btn">
                    <svg-icon name="view" size="24px" />
                    <span class="counter">{{ info?.browseNum || 0 }}</span>
                  </div>
                  <div
                    @mouseenter="playAnimate"
                    @mouseleave="stopAnimate"
                    @click="handleIconClick(index)"
                    class="btn animated"
                    :class="item.isActive ? 'active' : ''"
                    v-for="(item, index) in functionBtns"
                    :key="item.type"
                  >
                    <span class="counter">{{ item.counter }}</span>
                    <img :src="item.icon.href" />
                  </div>
                  <el-popover
                    placement="right"
                    popper-class="share-box"
                    popper-style="padding:0;"
                    :teleported="false"
                  >
                    <template #reference>
                      <div
                        @mouseenter="playAnimate"
                        @mouseleave="stopAnimate"
                        class="btn animated"
                      >
                        <img src="@/assets/image/promotion_default.png" />
                      </div>
                    </template>
                    <template #default>
                      <el-popover
                        placement="right"
                        popper-style="padding:0;"
                        :teleported="false"
                      >
                        <template #reference>
                          <div class="share-item">
                            <svg-icon name="wechat" size="20px" />
                            <span class="text">微信</span>
                          </div>
                        </template>
                        <template #default>
                          <div class="wx-qrcode">
                            <p class="tip-text">微信扫码分享</p>
                            <qrcode-vue
                              :value="qrcodeData"
                              :size="100"
                              level="H"
                            />
                          </div>
                        </template>
                      </el-popover>
                      <div class="share-item" @click="handleShareClick('wb')">
                        <svg-icon name="wb" size="20px" />
                        <span class="text"> 微博 </span>
                      </div>
                      <div class="share-item" @click="handleShareClick('qq')">
                        <svg-icon name="qq" size="20px" />
                        <span class="text">QQ</span>
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="附件详情" name="scond">
            <!-- 权限 -->
            <div class="attachment-list">
              <!-- <p class="title">附件内容:</p> -->
              <div v-html="info?.attachments"></div>
              <p class="title">附件下载:</p>
              <div class="list">
                <div class="item" v-for="(item, index) in info?.attachmentDataObjList" :key="index" @click="downloadDoc(item.url)">
                  <el-icon><Document /></el-icon>
                  <p class="file-name">{{ item.name }}</p>
                </div>
              </div>
            </div>
            <!-- 仅后台人员可看 -->
            <div class="attachment-list" v-if="userInfo.userType == '00'">
              <p class="title">小编成果下载:</p>
              <div class="list">
                <div class="item" v-for="(item, index) in info?.workResultObjList" :key="index" @click="downloadDoc(item.url)">
                  <el-icon><Document /></el-icon>
                  <p class="file-name">{{ item.name }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="关联政策" name="third" v-if="policyData && userInfo.vip >0">
            <!-- 权限 -->
            <div class="article-origin">
              <!-- <p class="title">政策图谱:</p> -->
              <!-- <div class="bg-gray-200">
                </div> -->
            </div>
            <!-- {{policyData}} -->
            <vueTree v-if="policyData" :data="policyData" :seachType="'2'"/>
          </el-tab-pane>
        </el-tabs>

        <!-- <policyAtlas v-if="policyData" :data="policyData" /> -->
      </template>

      <!-- 政策详情定制化开发 -->
      <template v-else-if="detailInfo.searchType === '2'">
        <div
          class="text-center title"
          style="color: #1176de; font-size: 24px; font-weight: 700"
        >
          {{ pageTitle }}
        </div>
        <policy :info="{ id: detailInfo.id }">
          <template #detail>
            <div v-html="details" class="rich-text"></div>
            <div class="detail-title">
              <!-- <div class="text-center title">{{ pageTitle }}</div> -->
              <div class="util-list">
                <div class="btn">
                  <svg-icon name="view" size="24px" />
                  <span class="counter">{{ info?.browseNum || 0 }}</span>
                </div>
                <div
                  @mouseenter="playAnimate"
                  @mouseleave="stopAnimate"
                  @click="handleIconClick(index)"
                  class="btn animated"
                  :class="item.isActive ? 'active' : ''"
                  v-for="(item, index) in functionBtns"
                  :key="item.type"
                >
                  <span class="counter">{{ item.counter }}</span>
                  <img :src="item.icon.href" />
                </div>
                <el-popover
                  placement="right"
                  popper-class="share-box"
                  popper-style="padding:0;"
                  :teleported="false"
                >
                  <template #reference>
                    <div
                      @mouseenter="playAnimate"
                      @mouseleave="stopAnimate"
                      class="btn animated"
                    >
                      <img src="@/assets/image/promotion_default.png" />
                    </div>
                  </template>
                  <template #default>
                    <el-popover
                      placement="right"
                      popper-style="padding:0;"
                      :teleported="false"
                    >
                      <template #reference>
                        <div class="share-item">
                          <svg-icon name="wechat" size="20px" />
                          <span class="text">微信</span>
                        </div>
                      </template>
                      <template #default>
                        <div class="wx-qrcode">
                          <p class="tip-text">微信扫码分享</p>
                          <qrcode-vue
                            :value="qrcodeData"
                            :size="100"
                            level="H"
                          />
                        </div>
                      </template>
                    </el-popover>
                    <div class="share-item" @click="handleShareClick('wb')">
                      <svg-icon name="wb" size="20px" />
                      <span class="text"> 微博 </span>
                    </div>
                    <div class="share-item" @click="handleShareClick('qq')">
                      <svg-icon name="qq" size="20px" />
                      <span class="text">QQ</span>
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
        </policy>
      </template>

      <!-- 部门详情定制化开发 -->
      <template v-else-if="detailInfo.searchType === '3'">
        <div
          class="text-center title"
          style="color: #1176de; font-size: 24px; font-weight: 700"
        >
          {{ pageTitle }}
        </div>
        <dept :info="{ id: detailInfo.id }">
          <template #detail>
            <div v-html="details" class="rich-text"></div>
            <div class="detail-title">
              <div class="util-list">
                <div class="btn">
                  <svg-icon name="view" size="24px" />
                  <span class="counter">{{ info?.browseNum || 0 }}</span>
                </div>
                <div
                  @mouseenter="playAnimate"
                  @mouseleave="stopAnimate"
                  @click="handleIconClick(index)"
                  class="btn animated"
                  :class="item.isActive ? 'active' : ''"
                  v-for="(item, index) in functionBtns"
                  :key="item.type"
                >
                  <span class="counter">{{ item.counter }}</span>
                  <img :src="item.icon.href" />
                </div>
                <el-popover
                  placement="right"
                  popper-class="share-box"
                  popper-style="padding:0;"
                  :teleported="false"
                >
                  <template #reference>
                    <div
                      @mouseenter="playAnimate"
                      @mouseleave="stopAnimate"
                      class="btn animated"
                    >
                      <img src="@/assets/image/promotion_default.png" />
                    </div>
                  </template>
                  <template #default>
                    <el-popover
                      placement="right"
                      popper-style="padding:0;"
                      :teleported="false"
                    >
                      <template #reference>
                        <div class="share-item">
                          <svg-icon name="wechat" size="20px" />
                          <span class="text">微信</span>
                        </div>
                      </template>
                      <template #default>
                        <div class="wx-qrcode">
                          <p class="tip-text">微信扫码分享</p>
                          <qrcode-vue
                            :value="qrcodeData"
                            :size="100"
                            level="H"
                          />
                        </div>
                      </template>
                    </el-popover>
                    <div class="share-item" @click="handleShareClick('wb')">
                      <svg-icon name="wb" size="20px" />
                      <span class="text"> 微博 </span>
                    </div>
                    <div class="share-item" @click="handleShareClick('qq')">
                      <svg-icon name="qq" size="20px" />
                      <span class="text">QQ</span>
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
        </dept>
      </template>

      <!-- 企业详情定制化开发 -->
      <template v-else-if="detailInfo.searchType === '4'">
        <company :info="{ id: detailInfo.id,name:detailInfo.name }">
          <template #detail>
            <!-- <div class="detail-title">
              <div class="text-center w-full">{{ pageTitle }}</div>
              <div class="util-list">
                <div class="btn">
                  <svg-icon name="view" size="24px" />
                  <span class="counter">{{ detailInfo.collectNum }}</span>
                </div>
                <div
                  @mouseenter="playAnimate"
                  @mouseleave="stopAnimate"
                  @click="handleIconClick(index)"
                  class="btn animated"
                  :class="item.isActive ? 'active' : ''"
                  v-for="(item, index) in functionBtns"
                  :key="item.type"
                >
                  <span class="counter">{{ item.counter }}</span>
                  <img :src="item.icon.href" />
                </div>
                <el-popover
                  placement="right"
                  popper-class="share-box"
                  popper-style="padding:0;"
                  :teleported="false"
                >
                  <template #reference>
                    <div
                      @mouseenter="playAnimate"
                      @mouseleave="stopAnimate"
                      class="btn animated"
                    >
                      <img src="@/assets/image/promotion_default.png" />
                    </div>
                  </template>
                  <template #default>
                    <el-popover
                      placement="right"
                      popper-style="padding:0;"
                      :teleported="false"
                    >
                      <template #reference>
                        <div class="share-item">
                          <svg-icon name="wechat" size="20px" />
                          <span class="text">微信</span>
                        </div>
                      </template>
                      <template #default>
                        <div class="wx-qrcode">
                          <p class="tip-text">微信扫码分享</p>
                          <qrcode-vue
                            :value="qrcodeData"
                            :size="100"
                            level="H"
                          />
                        </div>
                      </template>
                    </el-popover>
                    <div class="share-item" @click="handleShareClick('wb')">
                      <svg-icon name="wb" size="20px" />
                      <span class="text"> 微博 </span>
                    </div>
                    <div class="share-item" @click="handleShareClick('qq')">
                      <svg-icon name="qq" size="20px" />
                      <span class="text">QQ</span>
                    </div>
                  </template>
                </el-popover>
              </div>
            </div> -->
            <div>
              {{ info?.makesOffer }}
            </div>
          </template>
        </company>
      </template>

      <!-- 侧边栏 -->
      <div class="side-bar">
        <!-- <div
          @mouseenter="playAnimate"
          @mouseleave="stopAnimate"
          @click="handleIconClick(index)"
          class="btn animated"
          :class="item.isActive ? 'active' : ''"
          v-for="(item, index) in functionBtns"
          :key="item.type"
        >
          <span class="counter">{{ item.counter }}</span>
          <img :src="item.icon.href" />
        </div>
        <el-popover
          placement="left-start"
          popper-class="share-box"
          popper-style="padding:0;"
          :teleported="false"
        >
          <template #reference>
            <div
              @mouseenter="playAnimate"
              @mouseleave="stopAnimate"
              class="btn animated"
            >
              <img src="@/assets/image/promotion_default.png" />
            </div>
          </template>
          <template #default>
            <el-popover
              placement="left-start"
              popper-style="padding:0;"
              :teleported="false"
            >
              <template #reference>
                <div class="share-item">
                  <svg-icon name="wechat" size="20px" />
                  <span class="text">微信</span>
                </div>
              </template>
              <template #default>
                <div class="wx-qrcode">
                  <p class="tip-text">微信扫码分享</p>
                  <qrcode-vue :value="qrcodeData" :size="100" level="H" />
                </div>
              </template>
            </el-popover>
            <div class="share-item" @click="handleShareClick('wb')">
              <svg-icon name="wb" size="20px" />
              <span class="text"> 微博 </span>
            </div>
            <div class="share-item" @click="handleShareClick('qq')">
              <svg-icon name="qq" size="20px" />
              <span class="text">QQ</span>
            </div>
          </template>
        </el-popover> -->
        <el-backtop />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { useDetailHooks } from "./hooks";
import QrcodeVue from "qrcode.vue";
import { Document } from "@element-plus/icons-vue";
import policyAtlas from "../../components/policyAtlas/index.vue";
import policy from "./components/policy/index.vue";
import dept from "./components/dept/index.vue";
import company from "./components/company/index.vue";
import { formatTimeInCountDown } from "../../utils/countDown";
import { splitFileNameStr } from "../../utils/splitStr";
import anime from "animejs";
import { useRoute } from "vue-router"

const route: any = useRoute()
const { id, tab } = route.query
console.log('--',tab)
const qrcodeData = window.location.href;

const cloud = ref<any>(null);

const gradientX1 = ref("0%");
setTimeout(()=>formatTimeInCountDown(info?.value.cutOffTime, ".count-down"),1000)
onMounted(() => {
  nextTick(() => {
    console.log(cloud);

    createLoadingAnimation();
  });
  console.log('tab',tab=='third')
  if(tab=='third'){
console.log('--============')
    activeName.value = 'third'
  }
});


const createLoadingAnimation = () => {
  // 使用Anime.js创建颜色变化动画
  anime({
    targets: "#blueGradient",
    update: (anim: any) => {
      // 在每次动画更新时，手动更新渐变的终点
      gradientX1.value = 100 - anim.progress + "%";
    },
    duration: 3000, // 动画持续时间
    easing: "linear", // 缓动函数
    direction: "alternate",
    loop: true
  });
};

const {
  detailInfo,
  details,
  pageTitle,
  editorOption,
  playAnimate,
  functionBtns,
  stopAnimate,
  handleIconClick,
  handleShareClick,
  downloadDoc,
  policyData,
  goDetailPage,
  projectList,
  projectTotal,
  pageInfoChange,
  projectQueryInfo,
  projectLoading,
  info,
  detailPageLoading,
  auth,
  userInfo,
  activeName
} = useDetailHooks();
</script>

<style scoped lang="postcss">
.detail {
  :deep(.el-tabs__nav-scroll) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
  }
  :deep(.el-tabs__active-bar) {
    background-color: #3662ae;
  }
  :deep(.el-tabs__item) {
    color: #3662ae;
    padding: 0 20px !important;
  }
  :deep(.el-tabs__item.is-active) {
    color: #ffffff;
    background-color: #3662ae;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 4px;
    background-color: #3662ae;
  }
  .cell-item {
    font-size: 14px !important;
    font-weight: 900;
    width: 60px;
  }
  :deep(.el-descriptions__cell) {
    font-size: 14px !important;
  }
  @apply px-4 py-3;
  /* 样式用于全屏加载的覆盖层 */
  .loading-overlay {
    @apply overflow-hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  a {
    @apply text-theme-color;
  }
  .rich-text {
    white-space: pre-wrap;
  }
  :deep(.ql-align-center) {
    text-align: center;
  }
  .detail-title {
    @apply text-center my-8 font-bold flex justify-between items-center relative;
    font-size: 24px;
    .title {
      @apply mx-auto;
      width: calc(100% - 600px);
    }
    .util-list {
      @apply flex absolute right-0;
      font-size: 12px;
      width: 280px;
      .btn {
        @apply relative flex justify-center items-center bg-white mr-4 rounded-md;
        width: 54px;
        height: 34px;
        transition: all 0.3s;
        .counter {
          @apply absolute rounded-full bg-red-500 text-center text-white;
          width: 20px;
          height: 20px;
          top: -10px;
          right: -10px;
          font-size: 10px;
          line-height: 20px;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
      .active {
        background: #3fabf4a0;
      }
      .share-box {
        .share-item {
          @apply flex items-center px-3 py-2 cursor-pointer;
          &:hover {
            background: #f6f4f4;
          }
          .text {
            margin-left: 14px;
          }
        }
      }
      .wx-qrcode {
        @apply px-3 py-2 flex justify-center flex-wrap;
        .tip-text {
          @apply mb-2;
        }
      }
    }
  }
  /* user-select: none; */
  .content {
    @apply w-3/4 mx-auto overflow-x-auto;
    :deep(p) {
      font-size: 16px;
      span {
        font-size: 16px !important;
      }
    }
    :deep(a) {
      @apply text-theme-color;
    }
    .side-bar {
      @apply fixed flex flex-wrap justify-center;
      bottom: 10%;
      right: 8%;
      width: 48px;
      :deep(.el-backtop) {
        position: relative;
        right: 0 !important;
        bottom: 0 !important;
      }
      .btn {
        @apply relative flex justify-center items-center rounded-full mb-8 bg-white;
        width: 48px;
        height: 48px;
        transition: all 0.3s;
        .counter {
          @apply absolute rounded-full bg-red-500 text-center text-white;
          width: 20px;
          height: 20px;
          top: -10px;
          right: -10px;
          font-size: 10px;
          line-height: 20px;
        }
        img {
          width: 30px;
          height: 30px;
        }
      }
      .active {
        background: #3fabf4a0;
      }
      .share-box {
        .share-item {
          @apply flex items-center px-3 py-2 cursor-pointer;
          &:hover {
            background: #f6f4f4;
          }
          .text {
            margin-left: 14px;
          }
        }
      }
      .wx-qrcode {
        @apply px-3 py-2 flex justify-center flex-wrap;
        .tip-text {
          @apply mb-2;
        }
      }
    }
    .attachment-content {
      @apply mt-3;
      .title {
        @apply mb-2;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .article-origin {
      @apply my-3;
      .title {
        @apply mb-2;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .attachment-list {
      @apply mb-5;
      .title {
        @apply mb-2 mt-5;
        font-size: 18px;
        font-weight: bold;
      }
      .list {
        .item {
          @apply mb-2 flex items-center cursor-pointer rounded-md;
          /* @apply bg-gray-200 text-center py-5 cursor-pointer rounded-md; */
          font-size: 16px;
          .file-name {
            @apply ml-2;
            color: #409eff;
            text-decoration: underline;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* 设置元素的宽度，可以根据需要调整 */
          }
        }
      }
    }
  }
}

/* 动画 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    -ms-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
.other-info{
  .cell-item-dec{
    font-size: 14px !important;
    overflow:hidden;white-space: nowrap;text-overflow: ellipsis;
  }
}
</style>
